<!-- 报名列表一项 -->
<template>
	<view class="list-item" @click="enterInfo">
		<view class="left">
			<image class="image" :src="pageData.coverUrl" mode=""></image>
		</view>

		<view class="right">
			<view class="right-top">
				{{pageData.stageName}}
			</view>

			<view class="right-center">
				<view class="mark">
					<image class="mark-image" src="../../../../static/images/Frame.png" mode=""></image>
					<text>评分 {{pageData.evaluateLevel | leve}}</text>
				</view>

				<view class="">

				</view>

			</view>

			<view class="right-center2">
				<!-- 服务时间: 10:00~22:00 -->
			</view>

			<view class="right-botton">

				<view class="tag age">{{pageData.age}}岁</view>
				<view class="tag height">{{pageData.height}}cm</view>
				<view class="tag weight">{{pageData.weight}}kg</view>

			</view>

		</view>


		<view :class="{
			'submit':true,
			'submit2':isSubmit
		}" @click.stop="submit">
			{{statusMsg}}
		</view>




		<!-- 弹出层 -->
		<u-modal :show="show" :title="title" :content='content' :showCancelButton="true" :closeOnClickOverlay="true"
			@confirm="popSubmit" @cancel="popClose" @close="popClose">
			<view class="popButton" slot="confirmButton">
				<view @click="popClose" class="popButton-left-text">取消</view>

				<!-- #ifdef H5 -->
				<view class="popButton-textBox">
					<uni-link :href="hrefUrl" :showUnderLine="false">
						<view class="popButton-text">联系客服</view>
					</uni-link>
				</view>

				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<view class="popButton-textBox">
					<button open-type="contact" class="popButton-text">联系客服</button>
				</view>
				<!-- #endif -->

			</view>
		</u-modal>
	</view>
</template>

<script>
	// api请求
	import {
		applicantConfirmApi, // 确定预约
		applicantCancelApi, // 取消预约
	} from '@/api/activity.js'
	
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				isSubmit: false,

				pageData: {},

				show: false,

				title: '立即报名',
				content: '取消邀约艺人需联系客服',

			};
		},
		computed:{
			...mapState({
				hrefUrl: state => state.user.hrefUrl
			}),
			
			
			/**
			 * 状态显示文字
			 */
			statusMsg() {
				// 申请状态：0-已报名，1-已邀约，2-已完成，3-取消报名,4-撤销邀约
				let str = '';
				switch (this.pageData.status) {
					case 0:
						str = '确认邀约'
						break;
					case 1:
						str = '取消邀约'
						break;
					case 2:
						str = '已完成'
						break;
					case 3:
						str = '取消报名'
						break;
					case 4:
						str = '邀约撤销'
						break;
				}
				
				return str;
			}
		},
		filters: {
			leve(val) {
				return val + '.0'
			}
		},
		watch: {
			data: {
				handler() {
					let obj = this.data
					this.pageData = {
						age: obj.age,
						artistId: obj.artistId,
						coverUrl: obj.coverUrl,
						evaluateLevel: obj.evaluateLevel,
						height: obj.height,
						id: obj.id,
						signature: obj.signature,
						stageName: obj.stageName,
						status: obj.status,
						weight: obj.weight
					}

					this.isSubmit = obj.status === 0 ? false : true
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			init() {

			},
			/**
			 * 进入艺人详情
			 */
			enterInfo() {
				uni.navigateTo({
					url: `/pages/artist/info?id=${this.pageData.artistId}&isInInterval=${this.pageData.isInInterval ? '1':'0'}`

				})
			},




			/**
			 * 弹窗确定
			 */
			popSubmit() {

				this.popClose()
			},

			/**
			 * 关闭弹窗
			 */
			popClose(val) {
				this.show = false
			},



			/**
			 * 点击确认预约
			 */
			async submit() {

				// 如果已经邀约了,那就不能点击
				if (this.isSubmit) {
					// 打开弹窗
					this.show = true
					return
				}


				if (this.pageData.id === '' || this.pageData.id === undefined) {
					this.$public.showText('申请人id为空')
					return
				}

				// 取消或者确定
				if (this.isSubmit) {
					// 取消
					this.applicantCancel(this.pageData.id)
				} else {
					// 确定
					this.applicantConfirm(this.pageData.id)
				}
			},

			/**
			 * 确认预约
			 */
			async applicantConfirm(params) {
				const res = await applicantConfirmApi(params)

				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return
				}
				this.isSubmit = true
				this.$public.showText('确认预约成功')

			},

			/**
			 * 取消预约
			 */
			async applicantCancel(params) {
				const res = await applicantCancelApi(params)
				console.log('取消预约', res);

				if (res.code !== 200) {
					this.$public.showText(res.msg || '请求失败')
					return
				}

				this.isSubmit = false
				this.$public.showText('取消预约成功')
			}
		}
	}
</script>

<style lang="less" scoped>
	.list-item {
		#box(-, -, 24rpx, #fff);
		#flex(-, -, center);
		#padding(24rpx);
		box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
		position: relative;

		.left {
			.image {
				#box(140rpx, 140rpx, 24rpx);
				margin-right: 48rpx;
			}
		}

		.right {

			.right-top {
				#font(40rpx, #0f0d21, 700);
			}

			.right-center {
				#flex(-, -, center);
				margin: 24rpx 0;

				.mark {
					#flex(-, -, center);
					#font(24rpx, #0f0d21, 400);

					.mark-image {
						#box(32rpx);
						margin-right: 10rpx;
					}
				}


			}

			.right-center2 {
				#font(24rpx, #8c8a8a);
				margin-bottom: 24rpx;
			}


			.right-botton {
				#flex(-, -, center);

				.tag {
					#font(24rpx, #fdf3f3);
					#padding(8rpx 20rpx);
					border-radius: 100rpx;
				}

				.age {
					background-color: #EC606F;
				}

				.height {
					background-color: #F58B29;
					margin: 0 8rpx;
				}

				.weight {
					background-color: #7162EA;
				}


			}

		}

		.submit {
			#font(24rpx, #fdf3f3);
			#box(120rpx, 60rpx, 100rpx, linear-gradient(180deg, #E27C8A 0%, #EC606F 100%));
			#flex(-, center, center);

			position: absolute;
			top: 50%;
			right: 24rpx;
			margin-top: -30rpx;
		}

		.submit2 {
			background: #eee !important;
			color: #999;
		}



		.popButton {
			#flex(-, space-between, center);
			height: 96rpx;
			border-top: 2rpx solid #d6d7d9;


			.popButton-left-text {
				#flex(-, center, center);
				#font(32rpx, rgb(96, 98, 102));
				#box(50%, 100%);
				border-right: 2rpx solid #d6d7d9;
			}

			.popButton-textBox {
				#flex(-, center, center);
				#box(50%, 100%);

				.popButton-text {
					#font(32rpx, rgb(41, 121, 255));

					/* #ifdef MP-WEIXIN */
					padding: 0 !important;
					overflow: visible;
					background-color: rgba(#fff, 0);


					&::after {
						border: none;
						background-color: rgba(#fff, 0);
						border-radius: 0;
					}

					&:hover {
						background-color: rgba(#fff, 0);
					}

					/* #endif */
				}

			}


		}
	}

	/deep/ .u-modal__button-group--confirm-button {
		padding: 0;
	}
</style>